<template>
  <div class="add_dialog" v-if="viewModel">
    <el-dialog :title="`wiki电子书`" width="750px" :visible.sync="dialogFormVisible">
      <div class="delete-dialog">
        <el-alert title="wiki电子书" type="success" description="wiki电子书在线编辑，实时预览" :closable="false" show-icon>
        </el-alert>
        <el-form ref="form" style="margin-top:15px">
          <el-form-item label="书籍名称" :required="true">
            <el-input v-model="viewModel.name"></el-input>
            <div class="form-intro">输入wiki书籍名称，长度不能超过60个字符
            </div>
          </el-form-item>
          <el-form-item label="书籍简介" :required="true">
            <el-input type="textarea" :rows="3" v-model="viewModel.intro"></el-input>
            <div class="form-intro">输入书籍的简介,长度不能超过500个字符 </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" type="default">取 消</el-button>
        <el-button type="danger" @click="makeTheme" :loading="loading">创建电子书</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ala from 'ala'
export default {
    data () {
      return {
        dialogFormVisible: false,
        loading: false,
        viewModel: {}
      }
    },
    methods: {
      init (theme) {
        this.viewModel = theme
        this.dialogFormVisible = true
      },
      makeTheme () {
        this.$emit('save')
      },
      // 添加成功后触发的
      save () {
        this.loading = false
        this.dialogFormVisible = false
        this.viewModel.name = ''
        this.viewModel.intro = ''
      }
    }
    // /admin/wiki/edit
  }
</script>



<style lang="scss" scoped>
  .add_dialog {
    .delete-dialog {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      .el-form-item__label {
        font-size: 13px;
        font-weight: 400;
      }
      .form-intro {
        font-size: 12px;
        color: #999999;
        height: 16px;
        line-height: 16px;
      }
    }
    .el-form-item .el-form-item__label {
      width: 130px;
    }
    .dialog-footer {
      padding: 0px !important;
    }
  }
</style>

